<template>
  <div class="pre-order">
    <h2>预下单</h2>

    <el-card class="product-list">
      <template #header>
        <h3>商品列表</h3>
      </template>
      <el-table :data="tabel.slice(0, -1)" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="nums" label="数量" width="80"></el-table-column>
        <el-table-column prop="type" label="类型" width="80"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="all_price" label="总价"></el-table-column>
      </el-table>
      <div class="total-price">
        总计：{{ tabel[tabel.length - 1].all_price }}
      </div>
    </el-card>

    <el-form @submit.prevent="handlePreOrder" :model="formData" :rules="rules" ref="preOrderForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="formData.agree">同意条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading">提交预下单</el-button>
      </el-form-item>
    </el-form>

    <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>
    <el-alert v-if="preOrderNo" :title="`预下单成功，订单号：${preOrderNo}`" type="success" show-icon></el-alert>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const store = useStore();
const router = useRouter();

const formData = reactive({
  name: '12ds',
  mobile: '0985425467',
  email: 'xchen6367@gmail.com',
  desc: '966099',
  agree: true,
});

const tabel = ref([
  { id: 319, nums: 2, type: 0, price: '45999.00', all_price: 91998 },
  { id: 321, nums: 1, type: 3, price: '45999.00', all_price: 45999 },
  { all_price: 137997 }
]);

const preOrderNo = ref(null);
const error = ref(null);
const loading = ref(false);
const preOrderForm = ref(null);

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
};

const handlePreOrder = async () => {
  if (!formData.agree) {
    ElMessage.warning('请同意条款');
    return;
  }

  try {
    await preOrderForm.value.validate();
    loading.value = true;
    error.value = null;

    const result = await store.dispatch('preorder/createPreOrder', {
      ...formData,
      content: '',
      tabel: tabel.value
    });

    if (result.success) {
      ElMessage.success('预下单成功');
      preOrderNo.value = result.preOrderNo
    } else {
      if (result.error === '用户信息不存在！') {
        ElMessage.error(result.error);
        router.push("/login");
      }
    }
  } catch (err) {
    console.error('预下单失败:', err);
    error.value = '预下单失败，请稍后再试';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.pre-order {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.product-list {
  margin-bottom: 20px;
}

.total-price {
  margin-top: 10px;
  text-align: right;
  font-weight: bold;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

label {
  display: block;
  margin-bottom: 8px;
}

input, button {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

</style>
